.-experience{
	background: rgb(148, 92, 76) url(../img/bg.png);
	.-content{
		perspective:3000px;
		.-banner{
			width: 750px;
			height: 350px;
			background: #F2F4F5;
			margin:0 auto;
			border: 1px solid #eee;
			border-radius: 10px;
			color:#000;
			transition: transform .3s linear;
			overflow: hidden;
			box-shadow: 0 0 25px rgba(0,0,0,0.5);
			transform-style: preserve-3d;
			.-experience-content{
				transition: opacity 0.3s;
				height: 100%;
				.-left{
					float: left;
					height: 100%;
					position: relative;
					perspective: 800px;
					transform-style: preserve-3d;
					.-img{
						background: no-repeat center center;
						background-size: 55%;
						width: 150px;
						height: 100%;
						transform: translateZ(50px);
					}
					&:after{
						content: "";
						background: #eee;
						width: 1px;
						position: absolute;
						top: 10%;
						bottom: 10%;
						right: 0;
					}
				}
				.-right{
					padding-left: 50px;
					float: left;
					height: 100%;
					width: 550px;
					h4{
						color: #945C4C;
						font-size: 20px;
					}
					.-time{
						color: #AF7464;
						font-size: 14px;
					}
					.-post{
						color: #9E6351;
						font-size: 16px;
					}
					.-tech{
						color: #9E6351;
						font-size: 14px;
					}
					.-list{
						.-item{
							line-height: 30px;
							font-size: 16px;
							position: relative;
							&:before{
								content: "";
								position: absolute;
								top: 50%;
								left: -10px;
								width: 5px;
								height: 5px;
								transform: translateY(-50%);
								border-radius: 50%;
								background-color: #AF7464;
							}
						}
						.-item-en{
							font-size: 14px;
						}
					}
				}
			}
		}
		.-shout-cut{
			width: 200px;
			margin: 0 auto;
			padding-top: 50px;
			.-cut-list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				z-index: 101;
				.-item{
					width: 10px;
					height: 10px;
					border-radius: 50%;
					background-color: #623C32;
					cursor:pointer;
					transition: background-color .3s linear;
					position: relative;
					&:before{
						content: '';
						position: absolute;
						top: -15px;
						right: -15px;
						left: -15px;
						bottom: -15px;
					}
				}
				.-selected{
					background-color: #AF7164;
				}
			}

		}
		.-exp-des{
			margin-top: 50px;
			color: #FFF;
			text-align: center;
			font-size: 18px;
		}
	}

}

@media screen and (max-width: 1366px) {
	.-experience {
		.-content {
			top: 150px;
			.-shout-cut{
				padding-top: 20px;
			}
			.-exp-des{
				margin-top: 20px;
			}
		}
	}
}

@media screen and (max-width: 600px){
	.-experience{
		.-content{
			top:80px;
			.-banner{
				width: 90%;
				height: 80%;
				.-experience-content{
					.-left{
						display: none;
					}
					.-right{
						width: 90%;
						margin: 0 auto;
						padding: 0;
						float: none;
						h4{
							font-size: 16px;
							margin: 10px 0;
						}
						p{
							margin: 10px 0;
						}
						.-time{
							font-size: 12px;
						}
						.-post{
							font-size: 14px;
						}
						.-tech{
							font-size: 13px;
						}
						.-list{
							.-item{
								font-size: 12px;
								line-height: 16px;
								margin: 12px 0;
							}
						}
					}
				}
			}
			.-shout-cut{
				padding-top: 35px;
			}
			.-exp-des{
				display: none;
			}
		}
	}
}